import { defineComponent, ref, onMounted } from "vue";
import { Steps } from "~/src/components/Steps";
import { UserInfo } from "~/src/components/UserInfo";
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import { useRouter } from 'vue-router'; // 导入路由

export default defineComponent({
    setup() {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;
        const router = useRouter(); // 获取路由实例

        const countdown = ref(5); // 倒计时秒数
        onMounted(() => {
            // 创建定时器，每秒更新倒计时
            const timer = setInterval(() => {
                if (countdown.value>0){
                    countdown.value--;
                }else {
                    clearInterval(timer); // 清除定时器
                    router.push({
                        path: '/HomePage',
                        query: {}
                    }); // 跳转到首页
                }
            }, 1000);

            // 组件卸载时清除定时器，防止内存泄漏
            return () => {
                clearInterval(timer);
            };
        });

        return () => (
            <div class={Style.top}>
                <UserInfo time={countdown.value}></UserInfo>
                <Steps></Steps>
                <div class={Style.container_mar} >
                    <div class={Style.top_img} >
                        <img src="src/assets/images/hqpt.png" alt="挂号成功图标"></img>
                    </div>
                    <div class={Style.top_div} >
                        <div class={Style.fontStyle1}>
                            挂号成功，请领取凭条！
                        </div>
                        <div class={Style.fontStyle2}>
                            请提前30分钟持医社保卡到科室所在区域的分诊台，或候诊区候诊。
                            <br/>
                            将在<span style={{ color: "#3E77F8" }}>{countdown.value} 秒</span> 后关闭页面！
                        </div>
                    </div>
                </div>
            </div>
        );
    }
})
